<template>
  <div id="app">
    <div v-for="item in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <div class="main_content">
        <div class="box_content">
          <div>
            <!--img-->
            <div class="img_content">
              <img  src="../assets/hot_logo.jpg" alt="">
            </div>
            <!--title-->
            <div class="title_content">
              <span>{{item.name}}</span>
              <br>
              <span style="font-size: 1px;color: rgba(207,214,227,0.94)">{{item.time}}</span>
            </div>
            <!--button-->
            <div class="button_content">
              <el-button icon="el-icon-plus" type="warning" size="small" plain round>关注</el-button>
            </div>
            <!--content-->
            <div class="main">
              <span>{{item.content}}</span>
            </div>
            <!--lun-->
            <div class="lun_content">
              <img :src="'static/img/'+item.img" alt="">
            </div>
          </div>
          <!--bottom-->
          <div class="bottom_content">
            <div class="icon1" >
              <i class="el-icon-link"></i>
            </div>
            <div class="icon">
              <i class="el-icon-chat-dot-round"></i>
            </div>
            <div class="icon">
              <i class="el-icon-star-off"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Top",
    data(){
      return{
        currentPage:1, //初始页
        pageSize:5,    //每页的数据
        tableData: [{}],
      }
    },
    methods:{
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },

      /*查询所有信息*/
      SelectAll(){
        let _this = this
        this.$axios.get("http://localhost:8050/infor/queryById/"+2).then(function(res){
          _this.tableData = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      },

      /*模糊查询所有信息*/
      selectInfo(mix){
        let _this = this
        console.log(mix)
        if(this.mix==null){
          _this.$options.methods.SelectAll()
          return false;
        }
        this.$axios.post("http://localhost:8050/infor/selectInfo/"+this.mix).then(function(res){
          _this.tableData = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      }
    },
    created() {
      this.SelectAll();
      this.selectInfo(this.$route.params.mix)
    }
  }
</script>

<style scoped>
  .bottom_content .icon1{
    margin-left: 40px;
    float: left;
    font-size: 20px;
    color: rgba(196,218,227,0.94)
  }
  .bottom_content .icon{
    margin-left: 220px;
    float: left;
    font-size: 20px;
    color: rgba(196,218,227,0.94)
  }
  .lun_content{
    float: left;
    border-radius: 5px;
    margin-left: 66px;
  }
  .lun_content img{
    border-radius: 5px;
    width: 180px;
    height: 180px;
  }

  .bottom_content{
    padding-top: 15px;
    margin-left: 20px;
    height: 30px;
    width: 600px;
    float: left;
  }
  .main span{
    width: 550px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .main{
    margin-left: 10px;
    margin-top: 20px;
    float: left;
    width: 550px;
    height: 70px;
  }

  .button_content{
    float: right;
    margin-right: 20px;
  }

  .title_content span{
    font-size: 14px;
    font-weight: bold;
  }

  .title_content{
    float: left;
    height: 20px;
    width: 150px;
    margin-top: 6px;
    margin-left: 10px;
  }

  .img_content img{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    margin-left: 10px;
  }
  .img_content{
    float: left;
    height: 50px;
    width: 60px;
  }

  .main_content{
    padding: 20px 10px 5px 10px;
    margin-top: 10px;
    height: 355px;
    width: 638px;
    background-color: white;
  }
  .box_content{

    width: 638px;
    height: 290px;
  }
</style>
